<template>
  <!-- 个人信息 -->
  <div class="box">
    <!-- 头部 -->
    <div class="top">
      <span class="iconfont icon-chevron-thin-left" @click="getlog()"></span>
      <p>个人信息</p>
    </div>
    <div class="updati">
      <!-- 上传图片 -->
      <div class="upipg">
        <div class="logs">
          <van-uploader
            v-model="fileList"
            multiple
            :after-read="after"
            :preview-image="preview"
            :deletable="deletable"
          />
          <img :src="imageUrl" alt="" />
          <p>更换头像和挂件</p>
        </div>
      </div>
      <ul class="listd">
        <li>
          <span>账号:</span>
          <span style="margin-left: 2rem">{{ data.phone }}</span>
          <p class="iconfont icon-fuzhi" style="font-size: 1.6rem"></p>
        </li>
        <li @click="gjzna()">
          <span>昵称:</span>
          <span style="margin-left: 2rem">{{ data.name }}</span>
          <p class="iconfont icon-chevron-thin-right"></p>
        </li>
        <li>
          <span style="float: left">性别:</span>
          <!-- <span style="margin-left: 2rem"> -->
          <van-dropdown-menu
            style="
              width: 4rem;
              float: left;
              margin-left: 2rem;
              margin-top: 0.5rem;
            "
            dropdown-menu-background-color="red"
          >
            <van-dropdown-item
              v-model="value1"
              :options="option1"
              @change="hchange()"
            />
          </van-dropdown-menu>
          <!-- </span> -->
          <p class="iconfont icon-chevron-thin-right"></p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { uploadToGithub } from "@/js/upload/upload.js";
import getFileBase64 from "@/js/toBse64/toBse64.js";
import * as API from "@/components/api/hanjinqi.js";
export default {
  data() {
    return {
      data: {
        name: JSON.parse(localStorage.getItem("token"))
          ? JSON.parse(localStorage.getItem("token")).name
          : "未登录",
        phone: JSON.parse(localStorage.getItem("token"))
          ? JSON.parse(localStorage.getItem("token")).phone
          : "没有账号,因为还没有登录",
      },
      // imageUrl: "https://cdn.jsdelivr.net/gh/zmf-6/cdn//img/portraits.png",
      imageUrl: JSON.parse(localStorage.getItem("token")).img
        ? JSON.parse(localStorage.getItem("token")).img
        : "https://cdn.jsdelivr.net/gh/zmf-6/cdn//img/portraits.png",

      img_url_pre: "https://cdn.jsdelivr.net/gh/hanjinqi/han/",
      fileList: [],
      preview: false,
      deletable: false,
      value1: JSON.parse(localStorage.getItem("token")).gender
        ? JSON.parse(localStorage.getItem("token")).gender
        : 0,
      values: "男",
      option1: [
        { text: "男", value: 0 },
        { text: "女", value: 1 },
      ],
    };
  },
  methods: {
    // gitFile() {},
    // 点击更换头像
    async after(param) {
      let base64Img = await getFileBase64(param.file);
      let res = await uploadToGithub(param.file.name, base64Img);
      this.imageUrl = this.img_url_pre + res.data.content.path;
      let res1 = await API.hpictur({
        uid: JSON.parse(localStorage.getItem("token")).uid,
        img: this.imageUrl,
        gender: this.value1,
      });
      res1.data.gender = JSON.parse(res1.data.gender);
      localStorage.setItem("token", JSON.stringify(res1.data));
      // this.imageUrl = this.img_url_pre + "/img/" + param.file.name;
      // console.log(this.imageUrl)
      // await API.hpictur({
      //   uid: JSON.parse(localStorage.getItem("token")).uid,
      //   img: this.imageUrl,
      // });
    },
    //点击返回上一页
    getlog() {
      this.$router.go(-1);
    },
    //点击跳转到修改昵称页
    gjzna() {
      this.$router.push({ path: "/hsini" });
    },
    // 性别的修改
    async hchange() {
      let res = await API.hpictur({
        uid: JSON.parse(localStorage.getItem("token")).uid,
        img: this.imageUrl,
        gender: this.value1,
      });
      res.data.gender = JSON.parse(res.data.gender);
      localStorage.setItem("token", JSON.stringify(res.data));
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  /* height: 100vh; */
  z-index: 666;
  position: fixed;
  left: 0;
  top: 0;
  background: #f5f5f5;
}
.box .top {
  width: 100%;
  height: 3rem;
}
.top span {
  width: 10%;
  float: left;
  line-height: 3rem;
  margin-left: 0.3rem;
}
.top p {
  margin-left: 45%;
  line-height: 3rem;
}
.box .updati {
  width: 100%;
  height: 100%;
  background: #ffffff;
}
.updati .upipg {
  width: 95%;
  height: 14rem;
  border-bottom: 1px solid #f5f5f5;
  float: right;
}
.updati .listd {
  width: 95%;
  height: 12rem;
  float: right;
}
.listd li {
  width: 100%;
  float: left;
  height: 4rem;
  border-bottom: 1px solid #f5f5f5;
  line-height: 4rem;
}
.listd li p {
  float: right;
  margin-right: 1rem;
  color: #cbcbcb;
}
.upipg .logs {
  width: 35%;
  height: 8rem;
  margin-left: 31%;
  margin-top: 2rem;
}
.logs img {
  width: 80%;
  height: rem;
  margin-left: 10%;
  border-radius: 4rem;
}
.logs p {
  color: #f24a23;
  width: 100%;
  text-align: center;
  margin-top: 0.5rem;
  position: relative;
  top: 10px;
}
/* .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  } */
</style>